<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排行榜</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .page{
            width: 100%;
            height: 100%;
            font-size: 0;
            position: relative; 
        }
        .page .head{
            display: flex;
            justify-content: space-between;
            align-items: center;
           height: 1rem;
           line-height: 1rem;
           padding: 0 0.2rem;
           box-sizing: border-box;
           position: absolute;
           top:0;
           left: 0;
           width: 100%;
            
        }
        .page .head div{
            width: 33.33%;
        }
        .page .head .one{
            font-size: 0.24rem;
            color:#999;
            text-align: left;
        }
        .page .head .two{
             font-size: 0.38rem;
             color: #333;
             text-align: center;
        }
        .page .tabs{
            display: flex;
            justify-content: space-between;
            padding: 0 0.2rem;
            box-sizing: border-box;
            height: 0.86rem;
            line-height: 0.86rem;
            font-size: 0.34rem;
            color:#999; 
        }
        .page  .active{
             color:#F24E8A;
             border-bottom: 1px solid #F24E8A;
             padding-bottom: 0.15rem;
        }
         .page .dateList{
             font-size: 0.34rem;
             color: #999;
             display: flex;
             justify-content: space-around;
             height: 0.86rem;
             line-height: 0.86rem;
         }
         .page .content{
             position: absolute;
             top:1rem;
             left: 0;
             right: 0;
             bottom: 0;
             overflow-y: scroll; 
         }
         .page .content::-webkit-scrollbar{
             display: none;
         }
         .page .content .bgimg{
             width: 100%;
             height: 4.81rem;
             background-image:url(./img/Backgroundcolor.png) ;
             background-repeat: no-repeat;
             background-size: 100% 100%;
             background-position: center center;
             display: flex;
             justify-content: space-around;
             align-items: center;
             padding: 0 0.2rem;
             box-sizing: border-box;
         }
         .page .content .bgimg .first{
             width: 2.3rem;
             height: 4.1rem;
             border-radius: 0.2rem;
             border: 1px solid #fff;

         }
         .page .content .bgimg .first .box_img{
             width: 1.58rem;
             height: 1.92rem; 
             margin: 0 auto;
             margin-top:0.4rem;
         }
         .page .content .bgimg .first .box_img img{
              width: 100%;
              height: 100%;
         }
         .page .content .bgimg .second{
             width: 2.3rem;
             height: 4.1rem;
             border-radius: 0.2rem;
             border: 1px solid #fff;
         }
         .page .content .bgimg .second .box_img{
             width: 1.93rem;
             height: 2.32rem; 
             margin: 0 auto;
         }
         .page .content .bgimg .second .box_img img{
              width: 100%;
              height: 100%;
         }
         .page .content .bgimg .three{
             width: 2.3rem;
             height: 4.1rem;
             border-radius: 0.2rem;
             border: 1px solid #fff;
         }
         .page .content .bgimg .three .box_img{
             width: 1.58rem;
             height: 1.92rem; 
             margin: 0 auto;
             margin-top:0.4rem;
         }
         .page .content .bgimg .three .box_img img{
              width: 100%;
              height: 100%;
         }
         .page .content .bgimg .box{
              width: 100%;
              margin: 0 auto;
              text-align: center;
         }
         .page .content .bgimg .box h3{
              font-size: 0.34rem;
              color:#000;
              margin-top:0.1rem;
         }
         .page .content .bgimg .box p{
           padding: 0.05rem 0.15rem;
           box-sizing: border-box;
           background-color:#7f7678 ;
           border-radius: 0.5rem;
           font-size: 0.26rem;
           color:#fff;
           text-align: center;
           display: inline-block;
           margin-top:0.1rem;
         }
         .page .content .bgimg .box p+div{
              font-size: 0.32rem;
              color:#999;
              margin-top:0.1rem;
         }
         .page .content .list{
            width: 100%;
            padding: 0.1rem 0.2rem;
            box-sizing: border-box;  
         }
         .page .content .list ul li{
            display: flex;
            justify-content: space-between;
            height: 1.4rem;
            align-items: center;
            
         }
         .page .content .list ul li .left{
             display: flex;
             justify-content: flex-start;

         }
         .page .content .list ul li .left .imgs{
              width: 1.18rem;
              height: 1.18rem;
              border-radius: 0.2rem;
              margin-right: 0.2rem;
             margin-top: -0.1rem;
             border: 1px solid red;
         }

         .page .content .list ul li .left .con_type p:nth-child(1){
              font-size: 0.34rem;
              color:#000;
         }
         .page .content .list ul li .left .con_type p:nth-child(2){
              font-size: 0.28rem;
              color:#999;
         }
         .page .content .list ul li .right span{
              width: 0.63rem;
              height: 0.63rem;
              border-radius: 50%;
              background-color: #eee; 
              display: inline-block;
               color:#999;
               font-size: 0.3rem;
               text-align: center;
               line-height: 0.63rem;
         }
         .page .content .list ul li .right img{
             width: 0.4rem;
             vertical-align: -5px;
             margin-left: 0.1rem;
         }
    </style>
</head>

<body>
    <div class="page" id="app">
        <div class="head">
            <div class="one">
                <span><img src="" alt=""></span>
                <span>返回</span>
            </div>
            <div class="two">排行榜</div>
            <div></div>
        </div>
        <div class="content">
            <div class="tabs">
                <span v-for="(item,index) in tabList" :key="index" @click="tabBtn(index)" :class="tab==index?'active':''">{{item}}</span>
            </div>
            <div class="dateList">
               <span v-for="(items,index) in dateList" :key="index" @click="dateBtn(index)" :class="tabs==index?'active':''">{{items}}</span>
            </div>
            <div class="bgimg">
                 <div class="first box">
                   <div class="box_img"> <img src="./img/second.png" alt=""></div>
                  <h3>小熊</h3>
                  <p>魅力指数</p>
                  <div>390797</div>

                 </div>
                 <div class="second box">
                    <div  class="box_img"> <img src="./img/first.png" alt=""></div>
                    <h3>小熊</h3>
                    <p>魅力指数</p>
                    <div>390797</div>
                 </div>
                 <div class="three box">
                    <div  class="box_img"> <img src="./img/three.png" alt=""></div>
                    <h3>小熊</h3>
                    <p>魅力指数</p>
                    <div>390797</div>
                 </div>   
            </div>
            <div class="list">
                <ul>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="left">
                            <div class="imgs"><img src="" alt=""></div>
                            <div class="con_type">
                                <p>宝贝</p>
                                <p>魅力指数:231456</p>
                            </div>
                        </div>
                        <div class="right">
                            <span>4</span>
                            <img src="./img/youjiantou.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="./js/rem.js"></script>

    <script>
        const app =new Vue({
            el:'#app',
            data:{
                tab:0,
                tabs:0,
                tabList:['魅力榜','神聊榜','勤奋榜','豪气榜','守护榜'],
                dateList:['日榜','周榜','月榜']

            },
            methods:{
                tabBtn (val){
                    this.tab =val
                },
                dateBtn(val){
                    this.tabs=val
                }
            }
        })
    </script>
</body>

</html>